import React from 'react';
import { connect, router } from 'dva';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { Layout, Row, Col, Button } from 'antd';
import BaseComponent from 'components/BaseComponent';
import Toolbar from 'components/Toolbar';
import Panel from 'components/Panel';
import Mask from 'components/Mask';
import DataTable from 'components/DataTable';
import { ModalForm } from 'components/Modal';
import createColumns from './columns';
import Image from 'components/Image';
import qiaofinn from 'assets/images/qiaofinn.png'
const { Link } = router;
const { Content, Header, Footer } = Layout;
const Pagination = DataTable.Pagination;

@connect(({ room, loading }) => ({
  room,
  loading: loading.models.room
}))
export default class extends BaseComponent {
  state = {
    record: null,
    visible: false,
    rows: [],
    imageMask: {
      visible: false,
      imageUrl: ''
    }
  };

  // 查看图片
  handShowImage = thumbnail_path => {
    this.setState({
      imageMask: {
        visible: !this.state.imageMask.visible,
        imageUrl: thumbnail_path
      }
    })
  };

  handleDelete = records => {
    const { rows } = this.state;

    this.props.dispatch({
      type: 'room/remove',
      payload: {
        records,
        success: () => {
          // 如果操作成功，在已选择的行中，排除删除的行
          this.setState({
            rows: rows.filter(
              item => !records.some(jtem => jtem.id === item.id)
            )
          });
        }
      }
    });
  };

  render() {
    const { room, loading, dispatch } = this.props;
    const { pageData, house } = room;
    const columns = createColumns(this);
    const { record, visible } = this.state;

    const dataTableProps = {
      loading,
      columns,
      rowKey: 'id',
      dataItems: pageData,
      showNum: true,
      isScroll: true,
      onChange: ({ pageNum, pageSize }) => {
        dispatch({
          type: 'room/getPageInfo',
          payload: {
            pageData: pageData.jumpPage(pageNum, pageSize)
          }
        });
      },
    };

    const modalFormProps = {
      loading,
      record,
      visible,
      columns,
      modalOpts: {
        width: 700
      },
      onCancel: () => {
        this.setState({
          record: null,
          visible: false
        });
      },
      // 新增、修改都会进到这个方法中，
      // 可以使用主键或是否有record来区分状态
      onSubmit: values => {
        // 图片处理
        if (values['thumbnail_arr'][0].old) {
          values['thumbnail'] = values.thumbnail_arr[0].uid
        } else {
          values['thumbnail'] = values.thumbnail_arr[0].response.data.id
        }
        delete values.image_arr
        dispatch({
          type: 'room/save',
          payload: {
            record,
            values,
            success: () => {
              this.setState({
                record: null,
                visible: false
              });
            }
          }
        });
      }
    };

    return (
      <Layout className="full-layout page">
        <Content>
          <Panel title="说明">
            <Row gutter={20}>
              <Col span={6}>
                <Image
                  style={{ width: 200, height: 200 }}
                  src={house.thumbnail_path}
                  previewList={[
                    house.thumbnail_path
                  ]}
                />
              </Col>
              <Col span={12}>
                <h2>地址:{house.address}</h2>
                <h4>面积:{house.area}</h4>
                <p>描述:{house.describe}</p>
              </Col>
            </Row>
          </Panel>
          <Header>
            <Toolbar
              appendLeft={
                <Button.Group>
                  <Button type="primary" icon={<PlusOutlined />} onClick={this.onAdd}>
                    新增
                </Button>
                  {/* <Button
                  disabled={!rows.length}
                  onClick={e => this.onDelete(rows)}
                  icon={<DeleteOutlined />}
                >
                  删除
                </Button> */}
                </Button.Group>
              }
            >
            </Toolbar>
          </Header>
          <Content>
            <DataTable {...dataTableProps} />
          </Content>
          <Footer>
            <Pagination {...dataTableProps} />
          </Footer>
          <ModalForm {...modalFormProps} />
        </Content>
        <Mask
          onClose={_ => this.handShowImage()}
          {...this.state.imageMask}
        >
          <img
            src={this.state.imageMask.imageUrl}
            alt="logo"
            style={{
              position: 'absolute',
              margin: 'auto',
              left: 0,
              right: 0,
              top: 0,
              bottom: 0
            }}
          />
        </Mask>

      </Layout>
    );
  }
}
